<template>
  <div class="body-bg" style="height: 100%">
    <!--  施工记录详情  -->
    <div class="contruction_records_detail">
      <close @click.native="toClose"></close>
      <big-center-title :title="detail_title"
                        :titleBacColor="titleBacColor"></big-center-title>
      <el-row class="two_content_row">
        <el-col class="two_content_row_col_left" :span="13"
                style="position: relative">
          <div class="border-div"
               style="width: calc(100% - 52px);height: 100%; border: 1px solid #bfbfbf; position: absolute;left: 35px;top: 0;"></div>
          <div class="detail_table_div detail_table_div_scroll"
               style="border: none;">
            <el-row class="my_u_row">
              <el-col class="my_u_col my_u_col_left" :span="6">
                <span>地点：</span>
              </el-col>
              <el-col class="my_u_col my_u_col_left my_u_col_noBorder"
                      :span="18">
                <span>{{ itemData.address || '--' }}</span>
              </el-col>
            </el-row>
            <el-row class="my_u_row">
              <el-col class="my_u_col my_u_col_left" :span="6">
                <span>负责人：</span>
              </el-col>
              <el-col class="my_u_col my_u_col_left my_u_col_noBorder"
                      :span="18">
                <span>{{ itemData.name || '--' }}</span>
              </el-col>
            </el-row>
            <el-row class="my_u_row">
              <el-col class="my_u_col my_u_col_left" :span="6">
                <span>建成时间：</span>
              </el-col>
              <el-col class="my_u_col my_u_col_left my_u_col_noBorder"
                      :span="18">
                <span>{{ itemData.upload_time || '--' }}</span>
              </el-col>
            </el-row>
            <el-row class="my_u_row my_u_row_other">
              <el-col class="my_u_col my_u_col_left my_u_col_top" :span="6">
                <span>描述：</span>
              </el-col>
              <el-col
                class="my_u_col my_u_col_left my_u_col_top my_u_col_noBorder my_u_col_noBorder_more"
                :span="18">
                <div>
                  {{ itemData.description || '--' }}
                  <!--                  <span v-for="it in 100">{{ itemData.description || '&#45;&#45;' }}</span>-->
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col class="two_content_row_col_right" :span="11">
          <div class="detail_table_div">
            <div class="detail_table_div_img_container">
              <div class="detail_table_div_imgDiv">
                <!--                <img src="https://dongping.jnaw.top/smxc_photo/2023011314565718.png" alt=""-->
                <!--                     style="object-fit: cover;width: 100%;height: 100%;">-->
                <el-image
                  v-if="itemData.img_url"
                  style="width: 100%;height: 100%;"
                  :src="itemData.img_url"
                  fit="contain" lazy
                  :preview-src-list="[itemData.img_url]">
                </el-image>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import pagination from '@/components/common/pagination/pagination'
import UnityIm from '../../utils/unityIm'
import bigCenterTitle from '@/components/unityweb/big-center-title'
import close from '@/components/unityweb/close'
import back from '@/components/unityweb/back'
import StringUtils from '../../utils/string'

export default {
  components: {
    pagination,
    'big-center-title': bigCenterTitle,
    close,
    back
  },
  data() {
    return {
      token: '',
      current_id: 1,
      unity_data: {},//获取的unity传递的参数
      title: '重点建筑物',
      detail_title: '重点建筑物',
      titleBacColor: 'linear-gradient(-77deg, #2DC1FF 0%, #3083FF 99%)',
      // 列表的数据
      datalist: [],
      pageNum: 1,
      page: 1,
      size: 10,
      total: 0,
      level: {
        level1: {
          color: '#EC2C2C',
          level: 1,
          level_name: '特别严重',
          level_chinese: '一级'
        },
        level2: {
          color: '#FF9811',
          level: 2,
          level_name: '严重',
          level_chinese: '二级'
        },
        level3: {
          color: '#FFE400',
          level: 3,
          level_name: '较重',
          level_chinese: '三级'
        },
        level4: {
          color: '#3F8FFB',
          level: 4,
          level_name: '一般',
          level_chinese: '四级'
        },
      },
      is_showList: true,//默认展示列表页面
      itemData: {
        address: '马河水库地处滕州市城区东北15千米处',
        name: '韩利锋',
        upload_time: '1960-05',
        img_url: 'http://mahe.jnaw.top/mh/mhsk_photo/shebei1.png',
        description: '马河水库为滕州市第一大水库，仅次于枣庄市岩马水库的第二大水库，在鲁南地区发挥着防洪、灌溉、供水、发电、养殖等重要的功能，收到良好的综合效益。库区风景优美，交通方便，是重要的旅游地。\n' +
          '马河水库于1959年11月动工兴建，1960年5月建成蓄水。水库控制流域面积240平方千米，水面跨邹城、滕州两市，南北约6千米，总库容1.38亿立方米，兴利库容0.7亿立方米。水库工程主要包括主坝、副坝、溢洪道、放水洞、发电站等。主坝为黏土心墙砂壳坝，长926米，最大坝高23.30米。马河水库位于鲁中南中低山区西部边缘，区内河床宽约200米。库区地貌按成因可分为剥蚀地形、堆积地形两种。剥蚀地形包括剥蚀残丘、台地，后者在区内广泛分布。堆积地形包括堆积阶地、冲积平原及河漫滩三种形式。'
      },//详情
      unity_type: 'id',//默认传id,传array时，使用unity传过来的数据数组
      all_dataList: [],
      one_list: false,//是否是一条数据

    }
  },
  created() {
    //获取token
    // this.getToken();
  },
  mounted() {
    window.addEventListener('message', (event) => {
      //event.data获取传过来的数据
      let _obj = event.data
      let method_name = _obj.methodName || ''
      let paramsStr = _obj.parameterData || ''
      let params = StringUtils.toJson(paramsStr)
      if (_obj.managerType == 'open') {
        this.openHandler(method_name, params)
      } else if (_obj.managerType == 'close') {
      } else if (_obj.managerType == 'cancelSelected') {
      }
    })
    if (window.vuplex) {
      this.addMessageListener5()
    } else {
      // 初始化侦听器
      window.addEventListener('vuplexready', this.addMessageListener5)
    }
  },
  methods: {
    addMessageListener5() {
      UnityIm.receiveUnityOpenMessage((method_name, params) => {
        this.openHandler(method_name, params)
      })
    },
    openHandler(method_name, params) {
      switch (method_name) {
      case 'buildingQuery':
        this.getToken(params)
        this.detail_title = params.name || '重点建筑物'
        break
      }
    },
    //先获取token
    getToken(params) {
      var _this = this
      /* var datas = {};
      _this.$apis.u_getToken(datas).then(res => {
        if (res.result == 0) {
          _this.token = res.data;
          // 存token
          sessionStorage.setItem("token", _this.token);
          _this.getListPage(params);
        }
      }); */
      this.itemData = {
        address: '马河水库地处滕州市城区东北15千米处',
        name: '韩利锋',
        upload_time: '1960-05',
        img_url: 'http://mahe.jnaw.top/mh/mhsk_photo/shebei1.png',
        description: '马河水库为滕州市第一大水库，仅次于枣庄市岩马水库的第二大水库，在鲁南地区发挥着防洪、灌溉、供水、发电、养殖等重要的功能，收到良好的综合效益。库区风景优美，交通方便，是重要的旅游地。\n' +
          '马河水库于1959年11月动工兴建，1960年5月建成蓄水。水库控制流域面积240平方千米，水面跨邹城、滕州两市，南北约6千米，总库容1.38亿立方米，兴利库容0.7亿立方米。水库工程主要包括主坝、副坝、溢洪道、放水洞、发电站等。主坝为黏土心墙砂壳坝，长926米，最大坝高23.30米。马河水库位于鲁中南中低山区西部边缘，区内河床宽约200米。库区地貌按成因可分为剥蚀地形、堆积地形两种。剥蚀地形包括剥蚀残丘、台地，后者在区内广泛分布。堆积地形包括堆积阶地、冲积平原及河漫滩三种形式。'
      }
    },
    //js实现分页
    getTabelData(resData) {
      let data = JSON.parse(JSON.stringify(resData))
      this.datalist = data.splice((this.page - 1) * this.size, this.size)
    },
    //查询列表
    getListPage(params) {
      var _this = this
      var datas = {
        page: _this.page,
        size: _this.size,
        bubble_id: params.id,
        // bubble_id: 76,
        // bubble_id: 77,
      }
      _this.$apis.u_gcjl_unityengine(datas)
        .then(res => {
          if (res.result == 0) {
            _this.datalist = res.data
            _this.total = res.rows
            _this.pageNum = res.page
            _this.title = _this.datalist[0].name ? _this.datalist[0].name
              + '施工记录' : '施工记录'
            _this.is_showList = false
            _this.one_list = true
            _this.detail_title = _this.datalist[0].name ? _this.datalist[0].name
              + '施工记录' : '施工记录'
            _this.itemData = _this.datalist[0] || {}
          }
        })
    },
    //分页
    searchPagination(page) {
      this.page = page
      if (this.unity_type == 'array') {
        this.getTabelData(this.all_dataList)
      } else {
        this.getToken()
        // this.getListPage();
      }
    },
    //显示详情页面
    showDatail(item) {
      // console.log("点击了一条====", item)
      this.detail_title = item.name ? item.name + '施工记录' : '施工记录'
      this.itemData = item
      this.is_showList = false
    },
    // 关闭详情页面
    hideDetail() {
      this.is_showList = true
    },
    // TODO 告诉unity关闭网页
    toClose() {
      UnityIm.closePanelManager('buildingQuery')
    },
  }
}
</script>

<style lang="scss">
#app {
  background: none;
}

.unity_construction_list {
  width: 100%;
  height: 100%;
  /*background-color: rgba(0, 0, 0, 0.5);*/
  color: #fff;

  .unity_title_div {
    height: 61px;
    padding-left: 35px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end !important;

    .unity_title {
      height: 15px;
      background: linear-gradient(-77deg, #2DC1FF 0%, #3083FF 99%);
      border-radius: 6px;

      .unity_title_text {
        position: relative;
        padding: 0 20px;
        height: 24px;
        font-size: 24px;
        font-family: siyuan_bold;
        font-weight: bold;
        top: -18px;
        text-align: center;
      }
    }

    .unity_close {
      color: #fff;

      i {
        position: relative;
        padding-right: 35px;
        font-size: 40px;
      }
    }
  }

  .danger_table_div {
    //margin: 0px 35px 0px 35px;
    height: calc(100% - 61px - 80px - 2px - 20px);
    padding: 0 12px;
    margin: 20px 35px 0 35px;
    border: 1px solid #fff;
    font-size: 14px;
  }
}

.unity_construction_list {
  .pagination {
    //margin: 16px 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .el-pagination {
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .el-pagination__total {
    color: #fff !important;
  }

  .el-pagination button {
    color: #fff !important;
    background-color: unset !important;
  }

  .el-pagination .el-input__inner {
    color: #fff !important;
    background-color: unset !important;
  }

  .u_pagination {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-pagination__jump {
    color: #ffffff !important;
  }

  .el-pagination__editor.el-input .el-input__inner {
    border: solid 1px #fff !important;
  }

  .el-pagination.is-background .el-pager li {
    background-color: unset !important;
    color: #fff !important;
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #409EFF !important;
  }

  .my_u_row {
    //border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
    height: calc(100% / 11);
    display: flex;
    align-items: center;
  }

  .my_u_row:last-child {
    //border: none;
  }

  .my_u_row_noborder {
    border: none !important;
  }

  .my_u_col {
    //border-right: 1px dashed rgba(255, 255, 255, 0.6);
    //padding: 10px 20px;

    //height: 100%;

  }

  .my_u_col span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* 限制在一个块元素显示的文本的行数 */
    -webkit-box-orient: vertical;
    /* 垂直排列 */
    word-break: break-all;
    /* 内容自动换行 */
  }

  .my_u_col_center {
    text-align: center !important;
  }

  .my_u_col_center span {
    width: 100% !important;
    text-align: center !important;
  }

  .my_u_col_left {
    text-align: left !important;
  }

  .my_u_col_left span {
    width: 100% !important;
    text-align: left !important;
  }

  .my_u_col:last-child {
    border: none !important;
  }

  .u_zanwu {
    width: 100%;
    text-align: center;
    padding-top: 50px;
    font-size: 24px;
  }

  .unity_construction_list .el-row {
    margin: 0px !important;
    padding: 0px !important;
  }

  .unity_construction_list .el-col {
    padding: 0px !important;
    border: none !important;
  }

  .u_my_popover {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: none !important;
    color: #fff !important;
    text-align: center !important;
    max-width: 500px;
  }

  .u_my_popover .popper__arrow {
    border-top-color: rgba(0, 0, 0, 0.6) !important;
    bottom: -5px !important;
  }

  .u_my_popover .popper__arrow::after {
    border-top-color: rgba(0, 0, 0, 0.6) !important;
  }
}


//////////////////////////////////////////////////////////


.contruction_records_detail {
  width: 100%;
  height: 100%;
  /*background-color: rgba(0, 0, 0, 0.5);*/
  color: #fff;
  //padding: 35px;

  .unity_title_div {
    //width: calc(100% - 66px);
    //padding: 35px 35px 28px 35px;
    height: 61px;
    padding-left: 35px;
    display: flex;
    //justify-content: space-between;
    align-items: flex-end !important;

    .unity_title {
      height: 15px;
      background: linear-gradient(-77deg, #2DC1FF 0%, #3083FF 99%);
      border-radius: 6px;

      .unity_title_text {
        position: relative;
        padding: 0 20px;
        height: 24px;
        font-size: 24px;
        font-family: siyuan_bold;
        font-weight: bold;
        top: -18px;
        text-align: center;
      }
    }

    .unity_close {
      color: #fff;

      i {
        position: relative;
        //padding-right: 35px;
        padding-right: 10px;
        font-size: 40px;
        bottom: -8px;
      }
    }
  }

  .unity_title_div_close {
    //width: calc(100% - 66px);
    //padding: 35px 35px 28px 35px;
    height: 61px;
    padding-left: 35px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end !important;

    .unity_title {
      height: 15px;
      background: linear-gradient(-77deg, #2DC1FF 0%, #3083FF 99%);
      border-radius: 6px;

      .unity_title_text {
        position: relative;
        padding: 0 20px;
        height: 24px;
        font-size: 24px;
        font-family: siyuan_bold;
        font-weight: bold;
        top: -18px;
        text-align: center;
      }
    }

    .unity_close {
      color: #fff;

      i {
        position: relative;
        padding-right: 35px;
        font-size: 40px;
      }
    }
  }

  .two_content_row {
    //height: calc((100% - 61px - 6px - 35px - 50px));
    height: calc(100% - 84px - 35px);

    .two_content_row_col_left, .two_content_row_col_right {
      height: 100%;
    }

    .two_content_row_col_left {
      padding: 0 5px 0px 35px;
    }

    .two_content_row_col_right {
      padding: 0 35px 0px 10px;
    }

    .detail_table_div_img_container {
      width: 100%;
      height: 100%;
      //padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .detail_table_div_imgDiv {
      text-align: center;
      //height: 90%;
      //width: 90%;
      height: 100%;
      width: 100%;

      img {
        //width: 80%;
      }
    }
  }

  .detail_table_div {
    padding: 0 15px;
    //margin: 0 35px;
    border: 1px solid #BFBFBF;
    //height: calc((100% - 61px - 6px - 30px));
    height: 100%;
    font-size: 14px;

    .my_u_row {
      border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
      height: calc(100% / 9) !important;
      display: flex;
      align-items: center;
    }

    .my_u_col {
      //border-right: 1px dashed rgba(255, 255, 255, 0.6) !important;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 15px !important;
    }

    .my_u_row_other {
      //min-height: calc(100% / 9 * 6) !important;
      height: fit-content !important;
      overflow: hidden !important;
      display: flex !important;
      align-items: start !important;
    }

    .my_u_col_top {
      align-items: start !important;
      padding-top: 15px !important;
      padding-bottom: 15px !important;
    }

    .my_u_col_noBorder {
      //border: none !important;
      border-left: 1px dashed rgba(255, 255, 255, 0.6) !important;
      min-height: 100%;
      height: fit-content;
    }

    .my_u_col_noBorder_more {
      min-height: calc((100vh - 85px - 35px) / 9 * 6) !important;
    }

    .my_u_row:last-child {
      border: none;
    }

  }

  .detail_table_div_scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    //加滚动条
    &::-webkit-scrollbar {
      width: 6px;
      border-radius: 3px;
      background-color: rgba(0, 0, 0, 0);
      position: absolute;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      // width: 0px;
      // height: 0px;
      /*主色调 */
      background: #3083ff;
      /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #3083ff), color-stop(1, #2dc1ff));
      /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
      /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
      /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -o-linear-gradient(left, #3083ff, #2dc1ff);
      /*filter:滤镜名（参数)*/
      filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
    }
  }

}

.center_title_div {
  width: 100%;
  height: 35px;
  padding-top: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  //padding-left: -64px;

  .unity_title {
    height: 15px;
    background: linear-gradient(-77deg, #2DC1FF 0%, #3083FF 99%);
    border-radius: 6px;

    .unity_title_text {
      position: relative;
      padding: 0 10px;
      height: 24px;
      font-size: 18px;
      font-family: siyuan_bold;
      font-weight: normal !important;
      top: -12px;
      text-align: center;
    }
  }
}
</style>
